<template>
  <div class="info">
    <div class="top-top">
      <el-button @click="back" style="margin-right: 2%;height: 100%;">
        <template #icon>
          <iconBack></iconBack>
        </template>
        返回
      </el-button>
      <div class="title" >
        {{ workName }}
      </div>
      <div style="margin-right: 2%;">
        <el-input v-model="input" style="width: 240px;height: 100%;" placeholder="输入搜索关键词" @keyup.enter="seach"/>
        <el-button @click="seach" style="height: 100%;">
          <template #icon>
            <iconSeach></iconSeach>
          </template>
        </el-button>
      </div>
      <div style="margin-right: 2%;">
        <el-select v-model.number="statusValue" placeholder="切换班级" @change="status" style="width: 170px;height: 100%;">
      <el-option
        v-for="item in selectStatusValue"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
      </div>
    </div>
    <div class="main">
      <el-table :data="workInfo" style="width: 100%;":row-style="{height:'55px'}" :header-row-style="{height:'55px'}" >
        <el-table-column prop="studentName" label="学生名称" class="workList" align="center"/>
        <el-table-column prop="aiScore" label="AI评分" class="workList" align="center"/>
        <el-table-column prop="teacherScore" label="教师评分" class="workList" align="center"/>
        <el-table-column prop="totalPoints" label="总分" class="workList" align="center"/>
        <el-table-column prop="submitTime" label="提交时间" class="workList" align="center"/>
        <el-table-column label="状态" class="workList" align="center" #default="scope">
          <div v-if="scope.row.state==0" style="color:red">未提交</div>
          <div v-if="scope.row.state==1" style="color:green">已提交</div>
          <div v-if="scope.row.state==4" style="color:blue">已批阅</div>
          <div v-if="scope.row.state==5" style="color:yellow">已提醒</div>
          <div v-if="scope.row.state==6" style="color:black">已保存</div>
        </el-table-column>
        <el-table-column label="操作" align="center" #default="scope">
          <el-button style="border: 0;margin: 0;" @click="editStudent(scope.row.id)">
            <template #icon>
              <iconEdit></iconEdit>
            </template>
          </el-button>
          <el-button style="border: 0;margin: 0;" @click="lookInfo(scope.row.id)">
            <template #icon>
              <iconArrow></iconArrow>
            </template>
          </el-button>
          <el-button v-if="scope.row.state==1" style="border: 0;margin: 0;" @click="remind(scope.row.id,scope.row.state)">
            <template #icon>
              <iconRemind></iconRemind>
            </template>
          </el-button>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          :total="total"
          v-model:currentPage="currentPage"
          :page-size="pageSize"
          layout="total,prev,pager,next"
          @current-change="handleCurrentChange"
          />
    </div>
    </div>
  </div>
<!-- 编辑作业弹出框 -->
<el-dialog v-model="dialogFormWork" title="编辑作业信息" width="500">
  <el-form :model="formWork">
    <el-form-item label="老师评分" >
      <el-input v-model.number="formWork.teacherScore" autocomplete="off" placeholder="请输入老师评分"/>
    </el-form-item>
    <el-form-item label="作业状态" >
      <el-radio-group v-model.number="formWork.state" class="ml-4">
        <el-radio :value=0 size="large">未提交</el-radio>
          <el-radio :value=1 size="large">已提交</el-radio>
          <el-radio :value=4 size="large">已批阅</el-radio>
          <el-radio :value=5 size="large">已提醒</el-radio>
          <el-radio :value=6 size="large">已保存</el-radio>
        </el-radio-group> 
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogFormWork = false">取消</el-button>
      <el-button type="primary" @click="submitUpdate">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref,reactive } from 'vue';
import iconEdit from '../../../assets/edit.vue';
import iconSeach from '../../../assets/seach.vue';
import iconArrow from '../../../assets/arrow.vue';
import iconBack from '../../../assets/backone.vue';
import iconRemind from '../../../assets/remind.vue';
import { useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { onMounted } from 'vue';
import {getWorkScoreAPI,remindStudentWorkAPI,getStudentWorkScoreInfoAPI,submitUpdateStudentWorkScoreAPI} from'../../../api/teacher/work';
import { ElMessage } from 'element-plus';

const {params,query}=useRoute()
const val=ref(query.workId as any)
const workName=ref(query.workName as String)
const workId=parseInt(val.value)

// const workName=ref("高数")
const router=useRouter()
const dialogFormWork=ref(false)
const input=ref('')
const selectValue=ref()
const currentPage=ref(1)
const pageSize=ref(10)
const statusValue=ref(1)
// const workId=ref(1)
const total=ref(2)

const formWork = ref({
  teacherScore:21,
  state:1
})
//作业列表
const workInfo = ref([
  {
    id: '1',
    studentName: 'dfdf',
    aiScore:'23',
    teacherScore:'43',
    submitTime:'2023-23-23',
    totalPoints:'2433223534535',
    state:1
  },
  {
    id: '2',
    studentName: 'dfdf',
    aiScore:'23',
    teacherScore:'43',
    submitTime:'2023-23-23',
    totalPoints:'2433223534535',
    state:2
  },
])
//状态下拉框
const selectStatusValue=ref([
  {
    value:0,
    label:'未提交'
  },
  {
    value:1,
    label:'已提交'
  },
  {
    value:4,
    label:'已批阅'
  },
  {
    value:5,
    label:'已提醒'
  },
  {
    value:6,
    label:'已保存'
  },
])

//获取学生作业成绩列表
const getStudentWork=async()=>{
  let params={
    pageNo:currentPage.value,
    pageSize:pageSize.value,
    isAsc:true,
    studentName:input.value,
    taskId:workId,
    
    state:statusValue.value
  }
  const result=await getWorkScoreAPI(params)
  

  workInfo.value=result.data.data.list
  total.value=result.data.data.total
  console.log("渲染的数据",workInfo.value)
}

onMounted(()=>{
  getStudentWork()
})

const back=()=>{
  router.go(-1)
  // console.log(workName.value)
  // console.log(workName.value.length)
}
const seach=()=>{
  console.log('点击了搜索')
  getStudentWork()
}
const status=()=>{
  console.log("点击了切换作业状态",statusValue)
  getStudentWork()
}
//分页
const handleCurrentChange=()=>{
  console.log("当前页码数",currentPage.value)
  getStudentWork()
}
//获取学生作业详情
const editStudent=async(id)=>{
  console.log("点击了编辑课程",id)
  const result=await getStudentWorkScoreInfoAPI(id)
  formWork.value=result.data.data
  dialogFormWork.value=true
}
const lookInfo=(id: number)=>{
  console.log("点击了查看详情",id)
  router.push({
    path:'/te-home/workInfo',
    query:{
      markId:id
    }
  })
}
const remind=async(id,state)=>{
  if(state==1){
    const result=await remindStudentWorkAPI(id)
    if(result.data.code==200){
    ElMessage.success("提醒成功")
    }else{
      ElMessage.warning("提醒失败")
    }
  }else{
    ElMessage.success("学生已提交")
  }
  
  console.log("点击了提醒",id,state)
}
const submitUpdate=async()=>{
  console.log("点击了确认按钮",formWork.value)
  const result=await submitUpdateStudentWorkScoreAPI(formWork.value)

  if(result.data.code==200){
    ElMessage.success("编辑作业信息成功")
    dialogFormWork.value = false
    getStudentWork()
  }else{
    ElMessage.warning("编辑作业信息失败！")
  }
}
</script>
<style scoped>
.info{
  height: 90%;
  width: 90%;
  margin: 1% 5% 0 5%;
  /* background-color: aquamarine; */
}
.top-top{
  width: 100%;
  height: 6%;
  display: flex;
  /* background-color: antiquewhite; */
}
:deep(.el-select__wrapper.el-tooltip__trigger.el-tooltip__trigger){
  height: 100%;
  /* background-color: aqua; */
}
.title{
  height: 100%;
  background-color: rgba(226, 226, 226, 0.596);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 2%;
  padding-left: 10px;
  padding-right: 10px;
  overflow-wrap: break-word;
  border: solid rgba(226, 226, 226, 0.596);
  border-radius:6px;
  box-shadow: var(--el-box-shadow-light);
}
.main{
  width: 100%;
  height: 94%;
  /* background-color: rgba(0, 255, 255, 0.24); */
  margin-top: 1%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--el-box-shadow-light);
  border-radius:8px;
}
.workList{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: default;
  /* background-color: blue; */
}

.page{
  /* margin: auto; */
  /* height: 32px; */
  width: 100%;
  /* margin-bottom: 10px; */
  /* background-color: rgb(85, 130, 168); */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* bottom: 0; */
  margin-top: auto;
  margin-bottom: 1%;
  padding-top: 1%;
  /* margin-bottom: 44px; */
  /* bottom: 22px; */
  /* top:22px; */
}
:deep(.btn-prev){
  /* background-color: rgb(1, 85, 158); */
  height: 1em;
}
:deep(.number){
  /* background-color: rgb(54, 121, 180); */
  height: 1em;
}
:deep(.btn-next.is-last){
  /* background-color: antiquewhite; */
  height: 1em;
}
:deep(.el-pagination){
  height: 1em;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
}
</style>